import React, { useState } from 'react'
import './index.less'
import { Toast, NavBar, Image } from 'react-vant';
import { SettingO, Arrow } from '@react-vant/icons';

export default function My(props) {

  const [flag, setFlag] = useState(true)

  const [img, setImg] = useState([
    { con: require('../../../public/myImg/fen.png'), name: '我的题库' ,push:'my-database'},
    { con: require('../../../public/myImg/课程.png'), name: '我的课程' ,push:'my-course'},
    { con: require('../../../public/myImg/订单.png'), name: '我的订单' ,push:'my-database'},
    { con: require('../../../public/myImg/头条评论-红色.png'), name: '我的评论' ,push:'my-database'},
  ])
  const [icon, setIcon] = useState([
    { icon: require('../../../public/myImg/m1.png'), name: '优惠卷' },
    { icon: require('../../../public/myImg/m2.png'), name: '分享给好友' },
    { icon: require('../../../public/myImg/m3.png'), name: '联系客服' },
    { icon: require('../../../public/myImg/m4.png'), name: '关于我们' },
    { icon: require('../../../public/myImg/m5.png'), name: '意见反馈' },
  ])

  return (
    <div className='My'>
      <div className='top'>
        <NavBar
          title="标题"
          rightText={<SettingO />}
          onClickRight={() => Toast('按钮')}
        />
      </div>
      <div className='con'>
        <div className='con-top' onClick={()=>console.log(props.history.push('/my-info'))}>
          <Image round fit='cover' width='15vw' height='15vw' src='https://img.yzcdn.cn/vant/cat.jpeg' />
          {flag ? <div className='con-top-1'>{'登录'}</div> :
            <div className='con-top-2'>
              <div>学员009</div>
              <div>高级VIP</div>
            </div>
          }
        </div>
        <div className='con-but'>
          {
            img.map(item => {
              return <div className='con-but-item' key={item.name} onClick={()=>props.history.push(`/${item.push}`)}>
                <div className='con-but-item-img'>
                  <img src={item.con}/>
                </div>
                <div className='con-but-item-name'>{item.name}</div>
              </div>
            })
          }
        </div>
      </div>
      <div className='but'>
        {
          icon.map(item => {
            return <div className='but-item' key={item.name}>
              <div className='but-item-left'>
                <img src={item.icon}/>
                <div>{item.name}</div>
              </div>
              <div className='but-item-right'>
                <Arrow />
              </div>
            </div>
          })
        }
      </div>
    </div>
  )
}
